<template>
  <el-dialog :visible.sync="dialog" :title="(isAdd ? '新增' : '修改') + '收货地址'" :close-on-click-modal="false" append-to-body center width="1000px" custom-class="form-dialog" @close="cancel">
    <el-form ref="addressForm" v-loading="addressFormLoading" :inline="true" :model="addressForm" :rules="addressFormRules" class="form-container">
      <el-row>
        <el-form-item label="收货公司" prop="company">
          <el-tooltip slot="label" effect="light" content="若收货方为第三方,请上传盖章送货委托书">
            <span><i class="el-icon-question theme-color" />收货公司</span>
          </el-tooltip>
          <el-input v-model.trim="addressForm.company" placeholder="请填写公司全称" clearable />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model.trim="addressForm.name" placeholder="请填写收货人中文全名" clearable />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="手机" prop="phone">
          <el-input v-model.trim="addressForm.phone" clearable />
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model.trim="addressForm.tel" clearable />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="省" prop="province">
          <el-select v-model.trim="addressForm.province" value-key="value" filterable clearable @change="changeProvince">
            <el-option v-for="item in this.$store.getters.dictSelectData.escm_province" :key="item.value" :value="item" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select v-model.trim="addressForm.city" value-key="value" filterable clearable @change="changeCity">
            <el-option v-for="item in citys" :key="item.value" :value="item" :label="item.label" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="区/县" prop="district">
          <el-select v-model.trim="addressForm.district" value-key="value" filterable clearable>
            <el-option v-for="item in districts" :key="item.value" :value="item" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model.trim="addressForm.address" placeholder="街道,门牌号" clearable />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="注意事项" prop="remark">
          <el-tooltip slot="label" effect="light" content="注意事项中的内容会带到每一次的发货指令中">
            <span><i class="el-icon-question theme-color" />注意事项</span>
          </el-tooltip>
          <el-input v-model.trim="addressForm.remark" type="textarea" placeholder="注意事项中的内容会带到每一次的发货指令中" :autosize="{ minRows: 2}" maxlength="100" show-word-limit />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="是否默认" prop="defaultAddress">
          <el-radio-group v-model="addressForm.defaultAddress">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发票随货" prop="withInvoice">
          <el-radio-group v-model="addressForm.withInvoice">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="submitLoading" :disabled="submitDisabled" type="primary" @click="submitAddressForm">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDictSelectData, getDataInArrayByKeyEq } from '@/utils/common'
import { selectByPid } from '@/api/system/dict'
import { validAllPhone, createValidator } from '@/utils/validate'
export default {
  name: 'DeliveryAddressEditDialog',
  data() {
    const phoneValidator = createValidator(true, validAllPhone, '请输入有效手机', '手机号必填')
    const telValidator = createValidator(false, validAllPhone, '请输入有效电话')
    return {
      addressForm: {
        company: '', province: '广东省', city: '深圳市', district: '南山区', address: '',
        name: '', phone: '', tel: '', remark: '', defaultAddress: '', withInvoice: ''
      },
      addressFormRules: {
        company: [{ required: true, message: '收货公司必填', trigger: 'blur' }],
        name: [{ required: true, message: '名称必填', trigger: 'blur' }],
        phone: [{ required: true, validator: phoneValidator, trigger: 'blur' }],
        tel: [{ required: false, validator: telValidator, trigger: 'blur' }],
        province: [{ required: true, message: '省必填', trigger: 'change' }],
        city: [{ required: true, message: '市必填', trigger: 'change' }],
        district: [{ required: true, message: '区必填', trigger: 'change' }],
        address: [{ required: true, message: '详情地址必填', trigger: 'blur' }],
        defaultAddress: [{ required: true, message: '是否默认选', trigger: 'change' }],
        withInvoice: [{ required: true, message: '是否发票随货必选', trigger: 'change' }]
      },
      citys: [], districts: [],
      isAdd: true, dialog: false, addressFormLoading: false, submitLoading: false, submitDisabled: false
    }
  },
  created() {
    getDictSelectData('escm_province')
  },
  methods: {
    createShow() {
      this.isAdd = true
      this.dialog = true
    },
    updateShow() {
      this.isAdd = false
      this.dialog = true
      // 自动选中省 市 区
      this.autoInsertAddressValue()
    },
    cancel() {
      this.submitDisabled = false
      this.submitLoading = false
      this.$refs.addressForm.resetFields()
      this.dialog = false
    },
    submitAddressForm() {
      this.submitDisabled = true
      this.submitLoading = true
      this.$refs.addressForm.validate(valid => {
        if (valid) {
          console.log(this.addressForm)
          this.submitDisabled = false
          this.submitLoading = false
        } else {
          this.submitDisabled = false
          this.submitLoading = false
          return false
        }
      })
    },
    changeProvince(province) {
      // 先清空
      this.addressForm.city = ''
      this.addressForm.district = ''
      this.citys = []
      this.districts = []
      if (province && province.id) {
        selectByPid('escm_city', province.id).then(res => {
          this.citys = res
        })
      }
    },
    changeCity(city) {
      // 先清空
      this.addressForm.district = ''
      this.districts = []
      if (city && city.id) {
        selectByPid('escm_district', city.id).then(res => {
          this.districts = res
        })
      }
    },
    autoInsertAddressValue() {
      const provinceStr = this.addressForm.province
      const cityStr = this.addressForm.city
      const districtStr = this.addressForm.district
      // 编辑先选中省 后台只存值, 前端转化为选中对象
      const provinceList = this.$store.getters.dictSelectData.escm_province
      const province = getDataInArrayByKeyEq(provinceStr, provinceList, 'value')
      this.addressForm.province = province
      // 触发变更省 再选中市
      if (province && province.id) {
        selectByPid('escm_city', province.id).then(res => {
          this.citys = res
          const city = getDataInArrayByKeyEq(cityStr, res, 'value')
          this.addressForm.city = city
          // 触发变更市 再选中区县
          if (city && city.id) {
            selectByPid('escm_district', city.id).then(r => {
              this.districts = r
              const district = getDataInArrayByKeyEq(districtStr, r, 'value')
              this.addressForm.district = district
            })
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scope>

</style>
